<template>
  <Form
    v-model:rules="rules"
    v-model:formData="formData"
    v-model:formList="formList"
    :config="config"
    btn-text="提交"
    cancel-text="重置"
    @getForm="getForm"
    @submitData="submit"
    @cancel="cancel"
  />
  <div @click="validate">表单外进行表单验证</div>
</template>
<script lang="ts" setup>
// 提交按钮
const submit = (data: any) => {
  console.log(data)
}
const cancel = () => {
  console.log('object')
}
const formValidate = ref()
const getForm = (e: any) => {
  formValidate.value = e
  console.log(e?.value)
}
const validate = () => {
  formValidate.value.validate((valid: any) => {
    console.log(valid)
  })
}
/**
 * formWidth:string form 的宽度
 * 一般horizontallyWidth设置后formList的span将失去作用,span默认24
 * horizontallyWidth:string 横向排列，每一项的宽度，建议用百分比，适配方便
 * labelPosition?: string label的位置'left' | 'right' | 'top'
 * btnClass 添加全局设置好的class
 * hiddenBtn 隐藏按钮
 * multiLine: boolean flex 布局多行向左浮动断行
 */
const config = {
  horizontallyWidth: 'width:31%',
  // labelPosition:'left'
  // btnClass:'',
  // hiddenBtn: true
}
/**
 * 表单数据
 */
const formData = ref({
  name: '',
  region: '',
  date: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

/**
 * 表单项，如果表单项有增删要用ref()
  prop: string 对应formData中的key
  label: string 表单每项对应的名字
  type: string 类型
  placeholder: string
  style: string
  option?:option[] 单选和下拉才有
  importantStyle?:string 强制行的宽度，覆盖config.horizontallyWidth的宽度
  checkBoxOption?:CheckBoxOption[] 复选才有
  span?: Number 决定输入框的宽度（栅格式）

  // 当type为select时，一下属性才有作用
  disabled?: Boolean 禁用下拉框
  multiple?: Boolean 是否多选
  hidden?: Boolean 是否隐藏，if判断不显示
  collapseTags?: Boolean 多选是否合并
  isSearch：true?: Boolean 是否进行搜索筛选
  ==========只有当type===inputNumber时才有一下属性==========
  min?:number 最小输入数
  max?:number 最大输入数
  step?:number 步长
  maxLength?:number 最大输入长度
  controls?:Boolean 是否显示控制按钮
  position?:string 控制按钮的位置
  size?:string  额外配置尺寸
  ==========当type===date时设置日历显示和value的格式
  format?: string 显示格式
  valueFormat?: string value的格式
  disabledTime 设置禁选时间 日期格式2022-03-14、2022.03.14、2022/03/14,不能是数字型的字符串20220314
  DisabledTime{
    start?:string 最早时间
    during?: string[] 某些特定时间
    end?:string 最晚时间
  }

  change?: (v: string, key: string) => void  change事件 v：是当前值，key:是prop的值，如 prop: 'name'的name
  blur?: (v: string, key: string) => void 失去焦点事件
 */
const formList = ref([
  {
    prop: 'name',
    label: 'Activity name',
    type: 'input',
    placeholder: '',
    style: '',
    span: 24,
    change: (e: any, pros: string) => {
      console.log(e)
    },
    blur: (e: any) => {
      console.log(e)
    },
  },
  {
    prop: 'age',
    label: 'Age',
    type: 'inputNumber',
    placeholder: '',
    style: '',
    span: 24,
    min: 0,
    max: 200,
    step: 1,
    controls: true,
    position: 'right',
    size: 'large',
  },
  {
    prop: 'region',
    label: 'Activity zone',
    type: 'select',
    placeholder: '',
    style: 'width:100%',
    disabled: false,
    multiple: false,
    collapseTags: false,
    isSearch: true,
    span: 8,
    option: [
      {
        label: 'Zone one',
        value: 'shanghai',
      },
      {
        label: 'Zone two1',
        value: 'beijing1',
        disabled: true,
      },
      {
        label: 'Zone two2',
        value: 'beijing2',
      },
      {
        label: 'Zone two3',
        value: 'beijing3',
      },
      {
        label: 'Zone two4',
        value: 'beijing4',
      },
    ],
  },
  {
    prop: 'date',
    label: 'Activity time',
    type: 'date',
    placeholder: '',
    style: 'width: 100%',
    format: 'YYYY-MM-DD',
    valueFormat: 'YYYY-MM-DD',
    span: 8,
    disabledTime: {
      start: '2022.03.07',
      during: ['2022-03-16', '2022/03/13'],
      end: '2022-03-24',
    },
  },
  {
    prop: 'delivery',
    label: 'Instant delivery',
    type: 'switch',
    placeholder: '',
    style: '',
    span: 24,
  },
  {
    prop: 'type',
    label: 'Activity type',
    type: 'checkbox',
    placeholder: '',
    style: '',
    span: 24,
    importantStyle: 'width:100%',
    checkBoxOption: [
      {
        label: 'Online activities',
        name: 'type',
      },
      {
        label: 'Promotion activities',
        name: 'type',
      },
      {
        label: 'Offline activities',
        name: 'type',
      },
      {
        label: 'Simple brand exposure',
        name: 'type',
      },
    ],
  },
  {
    prop: 'resource',
    label: 'Resources',
    type: 'radio',
    placeholder: '',
    style: '',
    span: 24,
    // importantStyle: 'width:100%',
    option: [
      {
        label: '单选1',
        value: 'Sponsorship',
      },
      {
        label: '单选2',
        value: 'Venue',
      },
    ],
  },
  {
    prop: 'desc',
    label: 'Activity form',
    type: 'textarea',
    placeholder: '',
    style: '',
    span: 24,
  },
])

/**
 * 验证规则,如果表单项有增删,验证规则随之改变，要用ref()
 */
const rules = {
  name: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'blur',
    },
    {
      min: 3,
      max: 5,
      message: 'Length should be 3 to 5',
      trigger: 'blur',
    },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  date: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    {
      required: true,
      message: 'Please input activity form',
      trigger: 'blur',
    },
  ],
}

// watchEffect(() => {
//   console.log(formList.value)
//   console.log(formData.value[0])
// })
// watch(() => formData.value,
//   (v) => {
//     console.log(v)
//   },
//   { deep: true }
// )
// const ge = computed(() => {
//   if (formData.value.name && formData.value.date) {
//     return formData.value.name
//   } else {
//     return 333
//   }
// })
// watchEffect(() => {
//   console.log(formData.value.name)
// })
</script>
